<template>
  <view v-if="shenheStatus == 0" class="add-card">
    <view class="form-box">
      <u-form :model="form" label-width="150" ref="uForm">
        <u-form-item prop="name" :label="$t('shop.withdrawName')"
          ><u-input
            v-model="form.name"
            :placeholder="$t('shop.noWithdrawName')"
        /></u-form-item>
        <u-form-item prop="account" :label="$t('shop.account')"
          ><u-input
            v-model="form.account"
            :placeholder="
              $t('mdAdmin.account1') +
              typeText(form.type) +
              $t('mdAdmin.account1')
            "
        /></u-form-item>
        <u-form-item
          :prop="form.type == 'bank_card' ? 'bank' : ''"
          v-if="form.type == 'bank_card'"
          :label="$t('mdAdmin.bankName')"
          ><u-input v-model="form.bank" :placeholder="$t('mdAdmin.bankExm')"
        /></u-form-item>
      </u-form>
    </view>

    <view @click="submit" class="btn flex-y-center flex-x-center">{{
      $t('mdAdmin.bindAccount')
    }}</view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      form: {
        type: '',
        name: '',
        account: '',
        bank: '',
      },
      formRules: {
        name: [
          {
            required: true,
            message: this.$t('shop.noName'),
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur'],
          },
        ],
        account: [
          {
            required: true,
            message: this.$t('mdAdmin.noAccount'),
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur'],
          },
        ],
        bank: [
          {
            required: true,
            message: this.$t('mdAdmin.noBankName'),
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur'],
          },
        ],
      },
    };
  },
  methods: {
    submit() {
      this.$refs['uForm'].validate(async valid => {
        if (valid) {
          var formData = JSON.parse(JSON.stringify(this.form));
          if (formData.type != 'bank_card') delete formData.bank;
          const res = await this.$allrequest.shareholder.addWithdraw(formData);
          this.$utils.toast(res.msg || '服务器出错');
          if (res.code != 0) return;
          this.$utils.goBack();
        } else {
        }
      });
    },
  },
  onLoad(params) {
    //   设置标题  赋值参数类型
    switch (params.type) {
      case 'wechat':
        uni.setNavigationBarTitle({
          title: this.$t('mdAdmin.addWechat'),
        });
        this.form.type = params.type;
        break;
      case 'alipay':
        uni.setNavigationBarTitle({
          title: this.$t('mdAdmin.addAli'),
        });
        this.form.type = params.type;
        break;
      case 'bank_card':
        uni.setNavigationBarTitle({
          title: this.$t('mdAdmin.addCard'),
        });
        this.form.type = params.type;
        break;
      default:
        break;
    }
  },
  onReady() {
    this.$refs['uForm'].setRules(this.formRules);
  },
  computed: {
    typeText() {
      return function (type) {
        switch (type) {
          case 'wechat':
            return this.$t('shop.wx');

            break;
          case 'alipay':
            return this.$t('shop.alipay');

            break;
          default:
            return this.$t('shop.card');
            break;
        }
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.add-card {
  min-height: 100vh;
  background: #f2f2f2;
  .form-box {
    background-color: #fff;
    padding: 0 36rpx;
    /deep/.u-form-item--left__content__label {
      font-size: 30rpx;
      color: #1d1d1d;
    }
    /deep/input {
      text-align: right;
    }
  }
  .btn {
    margin: 80rpx auto 0;
    width: 678rpx;
    height: 88rpx;
    background: #f0250e;
    border-radius: 120rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}
</style>
